<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <todo>
            <todo-title slot="todo-title-in-todo" v-bind:titlein="title"></todo-title>
            <todo-item slot="todo-item-in-todo" v-for="item in todoItems" v-bind:itemin="item"></todo-item>
        </todo>
    </div>
    <script>
        Vue.component('todo', {
            template: '<div>\
                        <slot name="todo-title-in-todo"></slot>\
                            <ul>\
                                <slot name="todo-item-in-todo"></slot>\
                            </ul>\
                        </div>\
                        '
        })

        Vue.component("todo-title", {
            props: ["titlein"], //一个很奇怪的是不能支持-或者大写字母
            template: "<div>{{titlein}}</div>"
        })

        Vue.component("todo-item", {
            props: ["itemin"],
            template: "<li>{{itemin}}</li>"
        })


        var app = new Vue({
            el: '#app',
            data: {
                title: "标题",
                todoItems: ["A", "B", "C"]
            }
        })
    </script>
</body>

</html>